
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ajax的实现</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					aria-expanded="false">
					<span class="sr-only">折叠面板</span> <span class="icon-bar"></span> <span
						class="icon-bar"></span> <span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">员工信息管理</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">菜单一</a></li>
					<li><a href="#">菜单二</a></li>
					<li class="dropdown"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown">基础信息 <span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#">部门信息</a></li>
							<li><a href="#">员工信息</a></li>
						</ul></li>
				</ul>

				<ul class="nav navbar-nav navbar-right">
					<li class="dropdown"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown">${sessionScope.user.username} <span
							class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#">个人信息</a></li>
							<li><a href="#">密码修改</a></li>
							<li><a href="#">退出</a></li>
						</ul></li>
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>
	<div class="container-fluid">
		<div id="my-content"></div>
	</div>
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="js/jquery-3.3.1.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="js/bootstrap.min.js"></script>
	<!-- <script src="js/my.js"></script> -->
	<script src="js/sweetalert-2.1.0.min.js"></script>
	<script src="layer/layer.js"></script>

	<script type="text/javascript">
		$('a:contains(员工信息)').click(function(event) {
			//发送ajax请求
			loadEmpInfo();
			event.preventDefault();
		});

		function loadEmpInfo() {
			$.ajax({
				url : 'empServlet?operate=queryEmpInfo',
				method : 'get',
				dataType : 'html'//返回的数据类型
			}).done(function(data) {//data表示返回的数据，该数据类型由dataType指定
				$('#my-content').html(data);//将响应回来的数据显示在div中
			}).fail(function(xhr) {
				$('#my-content').html(xhr.responseText);
			});
		}
	</script>
</body>
</html>